<template>
	<view>
		<view class="top">
			<view class="video_tit">
				<view @click="change(0)" class="itemss " :class="data.index==0?'itemsselect':''">
					待审核
					<view class="xs" v-show="data.index==0"></view>
				</view>
				<view @click="change(1)" class="itemss" :class="data.index==1?'itemsselect':''">
					已通过
					<view class="xs" v-show="data.index==1"></view>
				</view>
				<view @click="change(2)" class="itemss" :class="data.index==2?'itemsselect':''">
					已驳回
					<view class="xs" v-show="data.index==2"></view>
				</view>
			</view>
		</view>
		<!-- @click.native.stop="$pageGo(`/pages/business/businessdetail?id=${item.id}`)" -->
		<view class="items" 
		
		v-for="(item,index) in data.list" :key="index">
			<view class="flex_jc_sb" >
				<view class="flex">
					<view class="flex">
						<image class="headimg" :src="item.user.avatar_text" mode="aspectFill"></image>
						<view class="name">
							{{item.user.nickname}}
						</view>
					</view>
					<view class="tip">
						第{{item.user.meeting_num}}期会员
					</view>
				</view>
				<view class="btns">
					{{item.type==1?'合作':'需求'}}
				</view>
			</view>
			<view class="text" >
				{{item.content}}
			</view>
			<view v-if="item.images_arr.length!=0"
				:class="item.images_arr.length>2?'imageCss':'imageCss'+item.images_arr.length">
				<image @click.stop="$previewImage(item.images_arr,inx)" 
				v-for="(i,inx) in item.images_arr" :key="inx"
					:src="i" mode="aspectFill"></image>
			</view>
			<view class="icons">
				<view class="flex">
					<view class="iconss" v-if="item.status != 1"
					@click.stop="$pageGo(`/pages/business/fbbusiness?id=${item.id}`)">
						<uni-icons type="compose" size="22" color="#D1D1D6"></uni-icons>
					</view>
					<view class="iconss" @click.stop="deleteBusinessList(item)">
						<uni-icons  type="trash" size="22"
							color="#D1D1D6"></uni-icons>
					</view>
				</view>
				<view class="xbtn" v-if="item.status == 2" @click="$pageGo(`/pages/business/businesssb?content=${item.reject_reason}`)">
					查看驳回原因
				</view>
				
				<view class="flex_b"  v-if="item.status == 1 || item.status == 3">
					<switch color="#0756FF" style="transform:scale(0.7)" :checked="item.status == '1'"
						@change.stop="switchchange($event,item)" />
					<span :style="{color:item.status == '1'?'':'#D1D1D6'}">
						{{item.status == '1'?'上架':'下架'}}
					</span>
				</view>
			</view>
		</view>
		<view class="fixed" @click="pageGo()">
			<uni-icons type="plus-filled" color="#006FFF" size="60"></uni-icons>
		</view>
		<view class="" style="height: 100rpx;"></view>
		<view class="k1" v-if="data.list.length == 0">
			<image src="/static/bkong.png" mode=""></image>
			<view class="texts">
				暂无内容
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		getBusinessList,
		delBusinessList,
		upSwitchBusinessList
	} from '@/common/http.api.js';

	const data = reactive({
		list: [],
		index: 0
	})
	const params = reactive({
		p: 2,
		status: 0,
		page: 1,
		limit: 10
	})
	onShow(() => {
		params.page = 1
		getBusinessList(params).then(res => {
			data.list = res.data
		})
	})
	onReachBottom(() => {
		params.page++
		getList()
	})
	function pageGo(){
		if(uni.getStorageSync('user').level==2){
			uni.navigateTo({
				url:'/pages/business/fbbusiness'
			})
		}else{
			uni.showModal({
				title:'系统提示',
				content: '您非正式会员，暂无发布权限！',
				confirmText:'确认',
				confirmColor:'#0756FF',
				showCancel:false,
				success: (res) => {
					if (res.confirm) {
					} else if (res.cancel) {}
				}
			});
		}
	}
	function getList() {
		getBusinessList(params).then(res => {
			data.list.push(...res.data)
		})
	}
	function change(i) {
		data.index = i
		params.status = i
		data.list = []
		params.page = 1
		getBusinessList(params).then(res => {
			data.list = res.data
		})
	}

	function deleteBusinessList(item) {
		uni.showModal({
			content: '确定要删除当前商机？',
			success: (res) => {
				if (res.confirm) {
					delBusinessList({
						id: item.id
					}).then(res => {
						if (res.code == 1) {
							uni.showToast({
								icon: 'none',
								title: '已删除'
							})
							data.list = []
							params.page = 1
							getList()
						}
					})
				} else if (res.cancel) {}
			}
		});
	}
	
	
	function switchchange(e,item){
		console.log(e,item);
		if(item.status == '1'){
			item.status = 3
		}else{
			item.status = 1
		}
		upSwitchBusinessList({id:item.id,status:item.status}).then(res=>{
			console.log(res);
		})
	}
	
</script>

<style lang="scss">
	page {
		background: #F7F8FC;
	}

	.k1 {
		text-align: center;
		margin: 120rpx auto;
		width: 360rpx;

		image {
			width: 360rpx;
			height: 360rpx;
		}

		.texts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			margin-top: 10rpx;
		}
	}

	.fixed {
		position: fixed;
		right: 0rpx;
		bottom: 160rpx;
	}

	.top {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		align-items: center;
		padding: 0rpx 20rpx 0rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		position: sticky;
		top: 0rpx;
		z-index: 9;

		.video_tit {
			display: flex;
			justify-content: space-around;
			width: 710rpx;

			.itemss {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #2F3245;
			}

			.itemsselect {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}

			.xs {
				width: 32rpx;
				height: 6rpx;
				background: #0756FF;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				margin: 6rpx auto 0rpx;
			}

		}
	}

	.items {
		margin: 20rpx auto;
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.headimg {
			width: 70rpx;
			height: 70rpx;
			border-radius: 35rpx;
		}

		.name {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			margin-left: 10rpx;
		}

		.tip {
			margin-left: 10rpx;
			width: 104rpx;
			height: 40rpx;
			background: linear-gradient(223deg, #FFC393 0%, #FFE9D9 100%);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1px solid #F9B781;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 20rpx;
			color: #8A3E00;
			line-height: 40rpx;
			text-align: center;
		}

		.btns {
			width: 100rpx;
			height: 48rpx;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			border: 1px solid #0756FF;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #0756FF;
			line-height: 48rpx;
			text-align: center;
		}

		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2; //几行就填几
			-webkit-box-orient: vertical;
			margin: 20rpx auto;
		}

		.imageCss1 {
			margin-bottom: 20rpx;

			image {
				width: 670rpx;
				height: 280rpx;
				border-radius: 20rpx;
			}
		}

		.imageCss2 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			image {
				width: 320rpx;
				height: 200rpx;
				border-radius: 20rpx;
			}
		}

		.imageCss {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;

			image {
				width: 210rpx;
				height: 160rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
			}
		}

		.icons {
			border-top: 1px solid #EDEDED;
			padding-top: 20rpx;
			display: flex;
			align-items: center;
			flex-direction: row-reverse;
			justify-content: space-between;
			.iconss{
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
			}
			.xbtn{
				width: 180rpx;
				height: 52rpx;
				background: #F3F3F3;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #979797;
				line-height: 28rpx;
				text-align: center;
				line-height: 52rpx;
			}
			.flex_b {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
				display: flex;
				align-items: center;
			}
		}
	}
</style>